<template>
    <div class="layout">
      <div class="left c3_tabs_ c3_html_p">
        <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick" style="border: 0px;height: 100%">
          <el-tab-pane label="组织架构" name="dept" style="border: 0px;height: calc(100% - 45px);">
            <div style="height: 100%; overflow-y: auto;">
              <el-tree style="border: 0px;"
                       :data="treeData"
                       :highlight-current="true"
                       :props="defaultProps"
                       node-key="id"
                       :indent="10"
                       :default-expanded-keys="keys"
                       @node-click="queryStaffByDept"
                       :expand-on-click-node="true"
                       ref="_dept_tree">
              </el-tree>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="center">
        <div class="center_left">
          <div class="_title">可选人员（共 <span style="color: red">{{staffData.length}}</span> 人）
            <span class="left_title_btn" @click="hideQuery">
            <i :class="hideClass"></i>
          </span>
          </div>
          <div class="query" v-show="hideQueryFlag">
            <!-- <div style="padding-right: 0px;">
              <el-input @keyup.enter.native="searchStaff" v-model="staffNo" placeholder="工号" size="mini" style="width:180px;margin-right: 15px;"></el-input>
                        <el-button size="mini" type="warning" @click="reset">重置</el-button>
            </div> -->
            <div style="padding-right: 0px;margin-top: 5px;">
              <el-input clearable @keyup.enter.native="searchStaff" v-model="staffName" placeholder="姓名" size="mini" style="width:180px;margin-right: 15px;"></el-input>
              <el-button size="mini" type="primary" @click="searchStaff">查询</el-button>

            </div>
          </div>
          <el-table :data="staffData" border stripe :height="hideHeight" style="border: 0px;" v-loading="loading"  size="mini"
                    class="c3_row_class c3_row_td_class" highlight-current-row @cell-dblclick="staffToRight" @row-click="checkedLeftRow">
            <el-table-column
              show-overflow-tooltip
              prop="userId"
              label="ID">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="userName"
              label="姓名">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="dept.deptName"
              label="部门">
            </el-table-column>
          </el-table>
        </div>
        <div class="center_center">
          <div class="action_btn">
            <el-button size="mini" @click="sendToRightAll"  type="primary"><i
              class="el-icon-d-arrow-right"></i></el-button>
          </div>
          <div class="action_btn">
            <el-button size="mini" @click="sendToRight"  type="primary"><i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
          <div class="action_btn">
            <el-button size="mini" @click="sendToLeft"  type="primary"><i class="el-icon-arrow-left"></i>
            </el-button>
          </div>
          <div class="action_btn">
            <el-button size="mini" @click="sendToLeftAll"  type="primary"><i
              class="el-icon-d-arrow-left"></i></el-button>
          </div>
        </div>
        <div class="center_right">
          <el-table :data="checkedStaffData" border stripe height="394" style="border: 0px;" v-loading="loading2" size="mini"
                    class="c3_row_class c3_row_td_class" highlight-current-row @cell-dblclick="staffToLeft" @row-click="checkedRightRow">
            <el-table-column
              show-overflow-tooltip
              prop="userId"
              label="ID">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="userName"
              label="姓名">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="dept.deptName"
              label="部门">
            </el-table-column>
          </el-table>
        </div>
        <div class="center_bottom">
          <el-button @click="saveResult" type="primary"  style="width: 80px"><i class="fa fa-check"></i> 保 存
          </el-button>
          <el-button @click="closePanel" type="default"  style="width: 80px"><i class="fa fa-close"></i> 关 闭
          </el-button>
          <div v-show="!nbrRequired" style="top: 5px;padding-left:10px; width: 200px;font-size: 10px; color: red; display: inline-block; position: absolute">
            备注：人员话务/权限角色发生变化后，该人员重新登录系统才会生效
          </div>
          <div v-show="nbrRequired" style="top: 5px;padding-left:10px; width: 200px;font-size: 10px; color: red; display: inline-block; position: absolute">
            备注：查询的结果只会显示有配置了联系号码的人员
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import { listUser, deptTreeSelect } from "@/api/system/user";

    export default {
      data () {
        return {
          tabName: 'dept',
          activeName: 'dept',
          hideQueryFlag: true,
          hideClass: 'fa fa-angle-double-down',
          hideHeight: 312,
          rightRow: null,
          leftRow: null,
          total: 0,
          loading: false,
          loading2: false,
          staffNo: '',
          staffName: '',
          staffData: [],
          checkedStaffData: [],
          staff: {},
          keys: [],
          treeData: [],
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        }
      },
      props: ['checkedData', 'nbrRequired', 'showGroup'],
      methods: {
        tabClick () {
          if (this.tabName === this.activeName) return
          this.tabName = this.activeName
          this.staffData = []
          if (this.activeName === 'dept') {
            this.hideQueryFlag = true
            this.hideClass = 'fa fa-angle-double-up'
            this.hideHeight = 312
          } else {
            this.hideQueryFlag = false
            this.hideClass = 'fa fa-angle-double-down'
            this.hideHeight = 357
          }
        },
        hideQuery () {
          if (this.activeName === 'group') return
          this.hideQueryFlag = !this.hideQueryFlag
          this.hideClass = this.hideQueryFlag ? 'fa fa-angle-double-up' : 'fa fa-angle-double-down'
          this.hideHeight = this.hideQueryFlag ? 282 : 357
        },
        reset () {
          this.staffNo = ''
          this.staffName = ''
        },
        saveResult () {
          this.$emit('saveResult', this.checkedStaffData)
        },
        closePanel () {
          this.$emit('closePanel')
        },
        sendToRight () {
          if (this.leftRow === null) return
          let index = this.staffData.findIndex(obj => obj.userId === this.leftRow.userId)
          this.staffData.splice(index, 1)
          this.checkedStaffData.push(this.leftRow)
          this.leftRow = null
          this.total = this.staffData.length
        },
        sendToRightAll () {
          this.checkedStaffData = this.checkedStaffData.concat(this.staffData)
          this.staffData = []
          this.leftRow = null
          this.total = this.staffData.length
        },
        sendToLeftAll () {
          this.staffData = this.staffData.concat(this.checkedStaffData)
          this.checkedStaffData = []
          this.rightRow = null
          this.total = this.staffData.length
        },
        sendToLeft () {
          if (this.rightRow === null) return
          let index = this.checkedStaffData.findIndex(obj => obj.userId === this.rightRow.userId)
          this.checkedStaffData.splice(index, 1)
          this.staffData.push(this.rightRow)
          this.rightRow = null
          this.total = this.staffData.length
        },
        checkedRightRow (row) {
          this.rightRow = row
        },
        checkedLeftRow (row) {
          this.leftRow = row
        },
        staffToRight (row) {
          let index = this.staffData.findIndex(obj => obj.userId === row.userId)
          this.staffData.splice(index, 1)
          this.checkedStaffData.push(row)
          this.total = this.staffData.length
        },
        staffToLeft (row) {
          let index = this.checkedStaffData.findIndex(obj => obj.userId === row.userId)
          this.checkedStaffData.splice(index, 1)
          this.staffData.push(row)
          this.total = this.staffData.length
        },
        queryStaffByDept (data) {
          let params = {
            deptId: data.id,
            userNo: '',
            userName: ''
          }
          this.queryStaff(params)
        },
        searchStaff () {
          this.queryStaff({})
        },
        queryStaff (other) {
          let params = {
            deptId: '',
            pageSize: 1000,
            pageNum: 1,
            userNo: this.staffNo,
            userName: this.staffName // encodeURI(this.staffName).replace(/\+/g, '%2B')
          }
          listUser(Object.assign(params, other)).then(resp => {
            let temp = []
            resp.rows.forEach((row) => {
              if (this.checkedStaffData.findIndex(obj => obj.userId === row.userId) < 0) {
                temp.push(row)
              }
            })
            this.staffData = temp
            this.total = resp.total
          })
        },
        getDeptTree () {
            deptTreeSelect().then(response => {
                this.treeData = response.data;
            });
        }
      },
      mounted () {
        this.getDeptTree()
        Object.assign(this.checkedStaffData, this.checkedData)
      }
    }
  </script>
  <style scoped>
    .layout {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-right: 1px solid #dddddd;
    }
  
    .left {
      width: 25%;
      height: 100%;
      float: left;
      border: 1px solid #dddddd;
    }
  
    .center {
      width: 75%;
      height: 100%;
      position: relative;
      float: left;
      background: #f4f4f4;
      border: 1px solid #dddddd;
    }
  
    ._title {
      background: #EEF1F6;
      padding: 8px;
      border-bottom: 1px solid #dddddd;
    }
  
    .body {
      height: 90%;
      overflow: auto;
    }
  
    .center_left {
      border-right: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd;
      background: #FFFFFF;
      width: 45%;
      height: 90%;
      float: left;
    }
  
    .center_center {
      text-align: center;
      width: 10%;
      height: 90%;
      float: left;
    }
  
    .center_right {
      border-left: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd;
      background: #FFFFFF;
      width: 45%;
      height: 90%;
      float: left;
    }
  
    .center_bottom {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 10%;
      padding: 5px;
      text-align: center;
    }
  
    .action_btn {
      margin: 45px 0px;
    }
  
    .left_title_btn {
      float: right;
      padding: 0px 4px;
      cursor: pointer;
      color: #00a7d0;
      margin-left: 2px;
      border-radius: 3px;
    }
  
    .query {
      height: 45px;
      padding: 5px 20px 5px 10px;
      border-bottom: 1px solid #dddddd;
    }
  
  </style>
  